<template>
	<view>
		<u-navbar title="添加出行人" :autoBack="true" :placeholder="true" titleStyle="color:#fff" bgColor="#7e5a91"
			leftIconColor="#fff"></u-navbar>

		<!-- 页面主体 -->
		<view class="container">
			<!-- 报名提示 -->
			<view class="hint">
				<view class="hint-title">
					报名提示：
				</view>
				<view class="hint-content">
					为了确保您或您的子女能顺利参加研学旅行活动，明德励志将向您搜集个人相关信息，该信息仅用于研学产品报名及服务，明德励志研学旅行组委会将恪守法律，保护用户的个人信息安全。
					<span
						style="color: red;">如您或您的子女存在糖尿病、哮喘、心脏病、癫痴症、过敏症、传染病、晕动症、精神疾病等各类不适合参加研学旅行的疾病，或属于某种特殊体质，请务必详细填写相关信息，经明德励志同意并签订特殊版本的家长协议后方可参营。
					</span>否则一旦发生意外，明德励志将尽力协助您的子女就医，由此产生的相关经济责任、法律责任由您自行承担。
				</view>
			</view>

			<!-- 表格 -->
			<view class="form">

				<view class="form-item">
					<view class="form-item-title">
						姓名：<span style="color:red">*</span>
					</view>
					<view class="form-item-input-box">
						<input class="form-item-input" v-model="formData.name" type="text" placeholder="请输入中文名" />
					</view>
				</view>

				<view class="form-item">
					<view class="form-item-title">
						性别：
					</view>
					<view class="form-item-input-box">
						<radio-group @change="sexChange" class="form-group">
							<label class="form-lable" v-for="(item,index) in sexs" :key="index">
								<view class="radio-box">
									<radio :value="item.value" color="#7e5a91" class="radio"
										:checked="formData.sex == item.value" />
								</view>
								<view class="weui-cell__bd">{{item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>

				<view class="form-item">
					<view class="form-item-title">
						身高：
					</view>
					<view class="form-item-input-box">
						<input class="form-item-input" v-model="formData.high" type="number" placeholder="注明身高" />
					</view>
				</view>

				<view class="form-item">
					<view class="form-item-title">
						就读学校：
					</view>
					<view class="form-item-input-box">
						<input class="form-item-input" v-model="formData.school" type="text" placeholder="学校全称" />
					</view>
				</view>

				<view class="form-item">
					<view class="form-item-title">
						所在年级：
					</view>
					<view class="form-item-input-box">
						<view class="picker-box">
							<picker mode="multiSelector" @change="gradeChange" :range="gradeArray" :value="gradeIndex">
								<view>
									{{gradeArray[0][gradeIndex[0]]}}-{{gradeArray[1][gradeIndex[1]]}}
								</view>
							</picker>
						</view>
					</view>
				</view>

				<view class="form-item">
					<view class="form-item-title">
						出生日期：
					</view>
					<view class="form-item-input-box">
						<view class="picker-box">
							<picker mode="date" @change="birthChange">
								<view>{{formData.birth}}</view>
							</picker>
						</view>

					</view>
				</view>

				<view class="form-item">
					<view class="form-item-title">
						营员手机：<span style="color:red">*</span>
					</view>
					<view class="form-item-input-box">
						<input class="form-item-input" v-model="formData.mobile" type="number"
							placeholder="请输入营员本人手机号" />
					</view>
				</view>

				<view class="form-item">
					<view class="form-item-title">
						民族：
					</view>
					<view class="form-item-input-box">
						<input class="form-item-input" v-model="formData.mingzu" type="text" placeholder="如回族请注明" />
					</view>
				</view>

				<view class="form-item">
					<view class="form-item-title">
						证件类型：
					</view>
					<view class="form-item-input-box">
						<radio-group @change="cartTypeChange" class="form-group">
							<label class="form-lable" v-for="(item,index) in cartTypes" :key="index">
								<view class="radio-box">
									<radio :value="item.value" color="#7e5a91" class="radio"
										:checked="formData.ishuzhao == item.value" />
								</view>
								<view class="weui-cell__bd">{{item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>

				<view class="form-item">
					<view class="form-item-title">
						证件号：<span style="color:red">*</span>
					</view>
					<view class="form-item-input-box">
						<input class="form-item-input" v-model="formData.idcard" type="idcard" placeholder="请输入证件号" />
					</view>
				</view>

				<view class="form-item">
					<view class="form-item-title">
						健康状况：
					</view>
					<view class="form-item-input-box">
						<radio-group @change="healthChange" class="form-group">
							<label class="form-lable" v-for="(item,index) in healthStatus" :key="index">
								<view class="radio-box">
									<radio :value="item.value" color="#7e5a91" class="radio"
										:checked="formData.health == item.value" />
								</view>
								<view class="weui-cell__bd">{{item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>

				<view class="sub-btn-box">
					<view class="sub-btn" @click="addChuxing">
						添加出行人
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				sexs: [{
					value: '1',
					name: '男'
				}, {
					value: '2',
					name: '女'
				}], //性别
				cartTypes: [{
					value: '1',
					name: '身份证'
				}, {
					value: '0',
					name: '港澳通行证'
				}, {
					value: '0',
					name: '台湾通行证'
				}, {
					value: '0',
					name: '护照'
				}], //证件类型
				healthStatus: [{
					value: '1',
					name: '健康'
				}, {
					value: '2',
					name: '其他'
				}], //健康状况
				gradeArray: [
					['1年级(小学)', '2年级(小学)', '3年级(小学)', '4年级(小学)', '5年级(小学)', '6年级(小学)', '7年级(初中)', '8年级(初中)', '9年级(初中)',
						'10年级(高中)', '11年级(高中)', '12年级(高中)'
					],
					['1班', '2班', '3班', '4班', '5班', '6班', '7班', '8班', '9班', '10班', '11班', '12班', '13班', '14班', '15班',
						'16班',
						'17班', '18班', '19班', '20班', '其他'
					]
				], //年级
				gradeIndex: [0, 0],
				formData: {
					name: '', //姓名
					sex: '', //性别
					high: '', //身高
					mingzu: '', //民族
					birth: '', //生日
					mobile: '', //营员手机号
					school: '', //学校
					grade: '年级/班级', //年级
					idcard: '', //证件号码
					ishuzhao: '', //证件类型
					health: '' //健康状况
				}, //表格提交数据
			}
		},
		onLoad() {
			let today = new Date();
			let year = today.getFullYear();
			let month = today.getMonth() + 1; // 注意月份是从0开始计数的，所以需要加1
			let day = today.getDate();

			let date = year + "-" + month + "-" + day;
			this.formData.birth = date;
		},
		onShow() {

		},
		methods: {
			// 编辑出行人员
			async addChuxing() {
				if (this.formData.name == '') {
					this.$u.toast('请输入姓名')
					return;
				}
				if (this.formData.mobile == '') {
					this.$u.toast('请输入营员本人手机号')
					return;
				}
				if (this.formData.idcard == '') {
					this.$u.toast('请输入证件号')
					return;
				}
				let res = await this.$api.addchuxing(this.formData)
				if (res.code == 1) {
					this.$u.toast(res.msg)
					wx.navigateBack()
				}
			},

			// 性别切换
			sexChange(e) {
				this.formData.sex = e.detail.value
			},

			// 健康状况切换
			healthChange(e) {
				this.formData.health = e.detail.value
			},

			// 证件类型切换
			cartTypeChange(e) {
				this.formData.ishuzhao = e.detail.value
			},

			// 出生日期选择
			birthChange(e) {
				this.formData.birth = e.detail.value
			},

			// 年级切换
			gradeChange(e) {
				this.gradeIndex = e.detail.value;
				this.formData.grade = this.gradeArray[0][this.gradeIndex[0]] + '-' + this.gradeArray[1][this.gradeIndex[1]]
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 20rpx;

		.hint {
			font-size: 22rpx;

			.hint-title {
				font-size: 24rpx;
				line-height: 50rpx;
			}

			.hint-content {
				line-height: 32rpx;
				color: #333;
				text-indent: 4ch;
			}
		}

		.form {
			padding: 40rpx 10rpx 0 10rpx;

			.form-item {
				display: flex;
				font-size: 26rpx;
				color: #666;
				margin-bottom: 25rpx;

				&-title {
					width: 200rpx;
					line-height: 50rpx;
				}

				&-input-box {
					width: 100%;

					.form-item-input {
						background-color: white;
						padding: 0 10rpx;
						height: 60rpx;
						width: calc(100% - 20rpx);
						border-radius: 5rpx;
					}

					.form-group {
						display: flex;
						flex-wrap: wrap;

						.form-lable {
							display: flex;
							line-height: 60rpx;
							margin-right: 20rpx;

							.radio-box {

								.radio {
									transform: scale(0.7);
								}
							}

						}
					}

					.picker-box {
						background-color: white;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						border-radius: 5rpx;
					}
				}

			}

			.sub-btn-box {
				padding: 0 20rpx 80rpx 0;
				margin-top: 50rpx;

				.sub-btn {
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					color: white;
					border-radius: 10rpx;
					font-size: 28rpx;
					background-color: #7e5a91;
					margin: 20rpx 0;
				}
			}
		}
	}
</style>